<template>
  <div class="set-password">
    <Poptip transfer trigger="focus" placement="right" width="250">
      <input type="password" style="position: fixed;z-index: -10000;width: 0;border: none"></input>
      <Form :rules="formValidate">
        <FormItem prop="newPass">
          <Input
              :type="pwdType"
              password
              :maxlength="maxlength"
              v-model="currentValue"
              @on-change="handleChange"
              @on-focus="pwdType='password'"
              :size="size"
              :placeholder="placeholder"
              :disabled="disabled"
              :readonly="readonly"
          >
            <template #prefix>
                <img src="@/assets/password.png" class="image-id"/>

            </template>
          </Input>
        </FormItem>
      </Form>
      <!-- <Input
          :type="pwdType"
          password
          :maxlength="maxlength"
          v-model="currentValue"
          @on-change="handleChange"
          @on-focus="pwdType='password'"
          :size="size"
          :placeholder="placeholder"
          :disabled="disabled"
          :readonly="readonly"
      >
        <template #prefix>
          <img src="@/assets/password.png" style="width: 22px;height: 22px"/>

        </template>
      </Input> -->

      <div :class="tipStyle" slot="content">
        <div class="words">强度 : {{ strength }}</div>
        <Progress
            :percent="strengthValue"
            :status="progressStatus"
            hide-info
            style="margin: 13px 0;"
        />
        <br/>请至少输入 6 个字符。请不要使
        <br/>用容易被猜到的密码。
      </div>
    </Poptip>
  </div>
</template>

<script>
export default {
  name: "setPassword",
  props: {
    value: String,
    size: String,
    placeholder: {
      type: String,
      default: "密码长度为8-20个字符"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      currentValue: this.value,
      tipStyle: "password-tip-none",
      strengthValue: 0,
      progressStatus: "normal",
      strength: "无",
      grade: 0,
      formValidate: {
        newPass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            required: true,
            message: "密码长度为8-20个字符码，且应为数字、字母大小和特殊字符混合组成",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    checkStrengthValue(v) {
      // 评级制判断密码强度 最高5
      let grade = 0;
      if (/\d/.test(v)) {
        grade++; //数字
      }
      if (/[a-z]/.test(v)) {
        grade++; //小写
      }
      if (/[A-Z]/.test(v)) {
        grade++; //大写
      }
      if (/\W/.test(v)) {
        grade++; //特殊字符
      }
      if (v.length >= 10) {
        grade++;
      }
      this.grade = grade;
      return grade;
    },
    strengthChange() {
      if (!this.currentValue) {
        this.tipStyle = "password-tip-none";
        this.strength = "无";
        this.strengthValue = 0;
        return;
      }
      let grade = this.checkStrengthValue(this.currentValue);
      if (grade <= 1) {
        this.progressStatus = "wrong";
        this.tipStyle = "password-tip-weak";
        this.strength = "弱";
        this.strengthValue = 33;
      } else if (grade >= 2 && grade <= 4) {
        this.progressStatus = "normal";
        this.tipStyle = "password-tip-middle";
        this.strength = "中";
        this.strengthValue = 66;
      } else {
        this.progressStatus = "success";
        this.tipStyle = "password-tip-strong";
        this.strength = "强";
        this.strengthValue = 100;
      }
    },
    handleChange(v) {
      this.strengthChange();
      this.$emit("input", this.currentValue);
      this.$emit("on-change", this.currentValue, this.grade, this.strength);
      console.log("vvvvvvvvvvvvvv",this.currentValue)
      var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?#&._|])[a-zA-Z\d@$!%*#?&._|]{8,}$/;
      // 校验内容是不是包含中文
        var reg1 = /[\u4e00-\u9fa5]/;

      if(reg.test(this.currentValue) === true && reg1.test(this.currentValue) === false){
        this.formValidate.newPass[0].required = false
      }
    },
    setCurrentValue(value) {
      if (value === this.currentValue) {
        return;
      }
      this.currentValue = value;
      this.strengthChange();
      this.$emit("on-change", this.currentValue, this.grade, this.strength);
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  }
};
</script>

<style lang="less">
.ivu-input-prefix {
  top: 0 !important;
}
.image-id {
  width: 18px;
  height: 18px;
}
.ivu-input-prefix, .ivu-input-suffix {

  display: flex;
  align-items: center;
  justify-content: space-around;
}

.set-password .ivu-poptip,
.set-password .ivu-poptip-rel {
  display: block;
}

.password-tip-none {
  padding: 1vh 0;
}

.password-tip-weak {
  padding: 1vh 0;

  .words {
    color: #ed3f14;
  }
}

.password-tip-middle {
  padding: 1vh 0;

  .words {
    color: #2d8cf0;
  }
}

.password-tip-strong {
  padding: 1vh 0;

  .words {
    color: #52c41a;
  }
}
</style>
<style scoped>
.img-box {
  width: 22px;height: 22px
}
</style>
